<template>
  <!--测试 防抖 emitRef-->
  <el-input
    v-model="val"
    placeholder="测试 防抖 emitRef"
    clearable
    @blur="run"
    @change="run"
    @clear="run"
    @input="myinput"
    @keydown="clear"
  ></el-input>
  ({{val}})
</template>

<script lang="ts">
  import { defineComponent } from 'vue'
  import { ElInput } from 'element-plus'

  import emitDebRef from '../../../../lib/base/ref/ref-emit-debounce'

  export default defineComponent({
    name: 'nf-base-deb-emit',
    components: {
      ElInput,
    },
    props: {
      modelValue: {
        type: [String, Number, Boolean, Date]
      }
    },
    setup(props, context) {

      const ctlEvents = {
        run: () => {}, // 立即执行，不防抖了
        clear: () => {} // 清除上一次计时，用于输入汉字的情况。
      }

      // 不防抖，立即提交
      const run = () => {
        ctlEvents.run() // 立即执行
      }
      // 输入汉字的情况
      const clear = (e: any) => {
        if (e.key !== 'Backspace') {
          ctlEvents.clear() // 输入汉字时清除上次计时
        }
      }
      // 输入内容发生变化
      const myinput = () => {
        // events.input() 
      }
      const val = emitDebRef(props, context.emit, 'modelValue', ctlEvents, 500)

      return {
        val,
        run,
        clear,
        myinput
      }
    }
  })
</script>